<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中兴商城</title>
    <link rel="stylesheet" href="shoppingTrolley.css">
    <link rel="stylesheet" href="download/font_2136908_xlrccicccv/iconfont.css">
    <script src="download/font_2136908_xlrccicccv/iconfont.js"></script>
</head>

<body>
    <div class="head">
        <div class="headbox">
            <img src="img/icon_home.png" alt="">
            <span class="page">首页</span>
            <span class="login">登录</span>
            <span class="register">注册</span>
            <ul>
                <li>会员中心</li>
                <li>我的订单</li>
                <li class="li">手机商城<i></i></li>
            </ul>
            <div class="img">
                <img src="img/2.png" alt=""></br>
                <span>用手机扫一扫</span>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="header_count">
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>
            <div class="link">
                <input type="text">
                <a href="">搜索</a>
                <p>热门关键词：<span>Axon 20 &ensp;Axon11 SE 5G &ensp;Axon11 5G</span> </p>
            </div>
            <div class="shopping">
                <div class="shopping_car">
                    <span class="iconfont icon-gouwuche"></span>
                    <span style="margin-left: 5px;">查看购物车</span>
                    <b>0</b>
                </div>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li class="list">全部商品分类</li>
                <li>首页</li>
                <li>Axon系列</li>
                <li>Blade系列</li>
                <li>线上服务站</li>
                <li>中兴社区</li>
                <li>线下门店</li>
                <li>会员中心</li>
            </ul>
        </div>
    </div>
    <div class="slideshow">
        <div class="menu" style="display: none;">
            <ul>
                <li><img src="img/photo.jpg" alt="">智能手机<span class="iconfont icon-jiantou"></span></li>
                <li><img src="img/terminal1.jpg" alt="">智能终端<span class="iconfont icon-jiantou"></span></li>
                <li><img src="img/audio.jpg" alt="">影音娱乐<span class="iconfont icon-jiantou"></span></li>
                <li><img src="img/recharge.jpg" alt="">手机充电<span class="iconfont icon-jiantou"></span></li>
                <li><img src="img/parts.jpg" alt="">手机配件<span class="iconfont icon-jiantou"></span></li>
                <li><img src="img/rest.jpg" alt="">服务/其他<span class="iconfont icon-jiantou"></span></li>
            </ul>
        </div>
        <div class="Submenu">
            <img src="img/img5.jpg" alt="" style="margin-top: 5px;"></br>
            <span class="one"></span><b>Axon系列</b><span class="two"></span>
            <ul>
                <li><img src="img/photo2.png" alt="">中兴天机Axon20 5G</br>屏下摄像手机</li>
                <li><img src="img/photo.jpg" alt="">中兴天机Axon11 5G</br>5G视频手机做自己的导演</li>
                <li><img src="img/photo4.jpg" alt="">天机Axon 10 Pro 5G</br>5G先锋 为快不破</li>
                <li><img src="img/photo5.jpg" alt="">天机Axon 11 SE 5G</br>视频双路防抖 360度环...</li>
            </ul>
            <span class="one"></span><b>Blade系列</b><span class="two"></span>
            <ul>
                <li><img src="img/photo6.jpg" alt="">V2020Smart</br>大电量 大存储 大屏幕...</li>
                <li><img src="img/photo7.jpg" alt="">A7s</br>大电池、大内存</li>
            </ul>
            <span class="one"></span><b>其他</b><span class="two"></span>
            <ul>
                <li><img src="img/photo8.jpg" alt="">红魔 5G</br>5G游戏手机</li>

            </ul>
        </div>
        <div class="Submenu">
            <p>
                <span></span><b>便携投影</b><span></span>
            </p>
            <ul>
                <li><img src="img/be155764953f67c27963619301772a5d.jpg" alt="">ZTE中兴 Spro 2 智能..</br>小有所投 大有所想</li>
            </ul>

            <p>
                <span></span><b>智能穿戴</b><span></span>
            </p>
            <ul>
                <li><img src="img/dcb3389a6da9312f2b14a0fd41fa7fd6.jpg" alt="">nubia watch</br>刚柔并济，表现不凡</li>
            </ul>

            <p>
                <span></span><b>电视盒子</b><span></span>
            </p>
            <ul>
                <li><img src="img/294ac29483e926188fb7f9903bc3cc27.jpg" alt="">魅盒</br>4K高清网络机顶盒</li>
            </ul>

            <p>
                <span></span><b>网络/路由</b><span></span>
            </p>
            <ul>
                <li><img src="img/fa153259978774e932314879a80435e7.jpg" alt="">分布式路由</br>穿墙王 覆盖无忧</li>
                <li><img src="img/17fcf9d305aad39687e89e03416eed84.jpg" alt="">4G CPE</br>4G室内无线路由器</li>
                <li><img src="img/d5630fb829c5d76c5ac5402a75f09470.jpg" alt="">5G CPE</br>X50平台、5G高速网络</li>
                <li><img src="img/4cab101eb11a95802b3edfba81dbad1e.jpg" alt="">MF920U</br>随身WIFI热点</li>
            </ul>

            <p>
                <span></span><b>智能家居</b><span></span>
            </p>
            <ul>
                <li><img src="img/5c428b3ec1963741846e674ef27f7fe2.jpg" alt="">小兴看看Memo微光全...</br>网络无线家庭监控</li>
                <li><img src="img/bebc6046529e2e10439f85a882867dd7.png" alt="">努比亚 VR全景相机</br>360°全景记录生活</li>
                <li><img src="img/f761b255160e1002592607396a2ed89b.jpg" alt="">nubia neo智能声波电...</br>清新从齿出发</li>
                <li><img src="img/629aa5a16ef0ecf4a3247fd13b1648b5.jpg" alt="">Nubia neo智能速干牙...</br>收纳 风干二合一</li>
            </ul>
        </div>
        <div class="Submenu">
            <p>
                <span></span><b>耳机</b><span></span>
            </p>
            <ul>
                <li><img src="img/32fce6b0e7d61c167498e99261ce4213.jpg" alt="">律音耳机</br>打造不将就听觉盛宴</li>
                <li><img src="img/bee67448455bdb4a6bdcf0cf7a4c7d82.jpg" alt="">ZTE LiveBuds</br>真无线蓝牙耳机</li>
            </ul>

            <p>
                <span></span><b>音响</b><span></span>
            </p>
            <ul>
                <li><img src="img/bc18d3e38b7b3e24959303aafeb43f8b.png" alt="">红魔战鼓</br>便携式户外防水</li>
                <li><img src="img/07720716474fc384943f7f56cc0e2d24.jpg" alt="">蘑菇蓝牙音箱</br>吸盘设计</li>
            </ul>
        </div>
        <div class="Submenu">
            <p>
                <span></span><b>移动电源</b><span></span>
            </p>
            <ul>
                <li><img src="img/92968aa65fbc75792a0811ee74d57046.jpg" alt="">中兴 移动电源 pQ100</br>10050mAh</li>
            </ul>

            <p>
                <span></span><b>电源适配器</b><span></span>
            </p>
            <ul>
                <li><img src="img/cdcaa43ee98f547f9113784d74039823.jpg" alt="">中兴无线充电器</br>支持 15W快充</li>
            </ul>
            <p>
                <span></span><b>数据线</b><span></span>
            </p>
            <ul>
                <li><img src="img/0b8e1829c256b7d38d6b8432e16d8c45.jpg" alt="">Type C 数据线</br>接口 二合一</li>
            </ul>
        </div>
        <div class="Submenu">
            <p>
                <span></span><b>保护套</b><span></span>
            </p>
            <ul>
                <li><img src="img/2e79316491902c601a509600f7e276e2.jpg" alt="">A11 Pro智能保护套</br>原装配件、品质保证</li>
                <li><img src="img/c8fb093d6755ef467c6bba91572aae9a.jpg" alt="">V9 智能皮套</br>原装配件、品质保证</li>
            </ul>

            <p>
                <span></span><b>保护壳</b><span></span>
            </p>
            <ul>
                <li><img src="img/8b14e8a01857193e7d844d34596e8bc2.jpg" alt="">Axon 10 Pro硅胶壳</br>原装配件、品质保证</li>
                <li><img src="img/9f29295ad246da6e7e4aa46e0d6e443e.jpg" alt="">A7s TPU</br>原装配件、品质保证</li>
            </ul>
            <p>
                <span></span><b>贴膜</b><span></span>
            </p>
            <ul>
                <li><img src="img/8900b319031f2ab751b2f2c281aaa628.jpg" alt="">天机Axon9 Pro 钢化膜</br>
                </li>
            </ul>
            <p>
                <span></span><b>存储卡</b><span></span>
            </p>
            <ul>
                <li>
                    <img src="img/f217f68f2ddfc90c82e7625a94e21c80.jpg" alt="">T-Flash内存卡</br>
                </li>
            </ul>
            <p>
                <span></span><b>自拍杆/支架</b><span></span>
            </p>
            <ul>
                <li><img src="img/98923b824f6432ec6b283761d279d86e.jpg " alt=" ">中兴自拍杆</br>
                </li>
            </ul>
        </div>
        <div class="Submenu ">
            <p>
                <span></span><b>增值服务</b><span></span>
            </p>
            <ul>
                <li><img src="img/rest.jpg " alt=" ">碎屏保</br>仅搭配套餐销售</li>
            </ul>

            <p>
                <span></span><b>文创产品</b><span></span>
            </p>
            <ul>
                <li><img src="img/f8d9c75ea5b1f2737bfe1ecf98f8e76d.png " alt=" ">文件袋</br>
                </li>
                <li><img src="img/75a7fc40fc86f0e566b6a2290a4b3748.png " alt=" ">文化衫</br>
                </li>
                <li><img src="img/5537cd4f4df52c7b5679c1815cd91298.png " alt=" ">帆布包</br>
                </li>
                <li><img src="img/f1f4f0ffa8632e3c5a2ceef909845659.png " alt=" ">随行杯</br>
                </li>
                <li><img src="img/680df493dd9724d3bbba9266ee1cae59.png " alt=" ">积木</br>
                </li>
                <li><img src="img/a3dd755a093b926b739d698d22914854.png " alt=" ">帽子</br>
                </li>
                <li><img src="img/c90f781e743680c7ca94e30c63d4710a.png " alt=" ">笔袋</br>
                </li>
                <li><img src="img/016b9dd744061a0450053f907f49e556.png " alt=" ">冰箱贴</br>
                </li>
                <li><img src="img/ab682d6a293e0170259837109b14a1b8.png " alt=" ">玻璃杯</br>
                </li>
                <li><img src="img/bb0001e875feeae05c377a2aedc135a5.png " alt=" ">硅胶杯盖</br>
                </li>
            </ul>
        </div>
    </div>
    <div class="body">
        <div class="body_count">
            <div class="null" style="display: none;">
                <span class="iconfont icon-gouwuche"></span>
                <b>购物车内暂时没有商品，<a href="homePage.html" style="font-weight: bolder;">去首页</a>挑选喜欢的商品</b>
            </div>
            <div class="templete">
                <div class="templete_tittle">
                    <input class="inputone" type="checkbox">全选
                    <span style="margin-left: 200px;">商品</span>
                    <span style="margin-left: 250px;">单价（元）</span>
                    <span style="margin-left: 160px;">数量</span>
                    <span style="margin-left: 180px;">金额</span>
                    <span style="margin-left: 90px;">操作</span>
                </div>
                <h5>
                    <input class="inputtwo" type="checkbox">&ensp;&ensp;ZTE中兴官方商城
                </h5>
                <div class="box">
                    <input class="inputthree" type="checkbox">
                    <b><img src="" alt=""></b>
                    <span style="margin-left: 15px;" class="tittle"></span>
                    <span style="margin-top: 35px; margin-left: 120px;">¥<span class="price"></span></span>
                    <div class="num" style="margin-top: 25px;margin-left: 133px;">
                        <div class="num_count">
                            <button>-</button>
                            <span>1</span>
                            <button>+</button>
                        </div>
                    </div>
                    <span style="margin-top: 35px;margin-left: 115px;">¥<span class="money"></span></span>
                    <div class="operation" style="margin-top: 25px;margin-left: 75px;">
                        <a href="">收藏</a>
                        <p>删除</p>
                    </div>
                </div>
                <div class="box1">
                    <div>
                        <input class="inputfour" type="checkbox" style="margin-top: 22px;margin-left: 10px;margin-right: 10px;">全选
                        <a style="margin-left: 10px;">删除</a>
                    </div>
                    <ul>
                        <li style="margin-left: 20px;">已选商品:<span class="num1">0</span>件</li>
                        <li style="margin-left: 20px;">总计原价（不含运费）:<span>0</span></li>
                        <li style="margin-left: 20px;">优惠金额:<span>0</span></li>
                        <li style="margin-left: 20px;">合计（不含运费）:<span class="num2">0</span></li>
                    </ul>
                    <p style="margin-left: 11px;">去结算</p>
                </div>
            </div>
        </div>

    </div>
    <div class="express">
        <ul>
            <li>
                <img src="img/6fd680f3aa8b65ec835bfee40c7c6cb1.png" alt="">
                <h5>正品保障</h5>
            </li>
            <li>
                <img src="img/3481686fb1784c2d1f605ed122e9c524.png" alt="">
                <h5>15天换货承诺</h5>
            </li>
            <li>
                <img src="img/cd57c5584abb89993b8f1af59d156d3f.png" alt="">
                <h5>99元起免运费</h5>
            </li>
            <li>
                <img src="img/2c0baf608789ea427c1c07344d27f81b.png" alt="">
                <h5>全国售后网点</h5>
            </li>
            <li>
                <img src="img/782753c9be3ba2f610fc194e97307292.png" alt="">
                <h5>顺丰极速达</h5>
            </li>
            <li>
                <img src="img/f55bccb566d87b68471b9b7ee93bf87b.png" alt="">
                <h5>7天退货保障</h5>
            </li>
        </ul>
        <div class="serve">
            <div class="serve_count">
                <b>帮助中心</b></br>
                <span>购物指南</span><br>
                <span>支付方式</span><br>
                <span>配送指南</span><br>
                <span>结算</span><br>
            </div>
            <div class="serve_count">
                <b>售后服务</b></br>
                <span>退换货流程</span><br>
                <span>保修政策</span><br>
                <span>退换货政策</span><br>
                <span>售后网点</span><br>
            </div>
            <div class="serve_count">
                <b>关注我们</b></br>
                <span>官方微信</span><br>
                <span>中兴社区</span><br>
                <span>新浪微博</span><br>
            </div>
            <div class="serve_count">
                <b>关于我们</b></br>
                <span>商城简介</span><br>
                <span>礼品团购</span><br>
                <span>联系我们</span><br>
            </div>
            <div class="hotLine">
                <a href="">全国服务热线</a><br>
                <b>400-880-9999</b><br>
                <span>周一到周日9:00~24:00(全年无休息)</span></br>
                <img src="img/3fbfc85c1b12b1436a251d3e5d97ac141676959a.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="foot_count">
            <div>
                <a>中兴通讯</a>
                <a>中兴手机</a>
                <a>中兴智能家居</a>
                <a>努比亚（Nubia）</a>
                <a>互联网违法举报中兴</a>
            </div>
        </div>
        <p><span>服务协议 |隐私政策|</span>©2014 - 2020 深圳市中兴智谷科技有限公司版权所有，并保留所有权利 </p>
        <p>增值电信业务经营许可证：粤B2-20160352 | ICP备案证书号 :<span>粤ICP备16018970号|粤公网安备 44030502005102号|营业执照</span><img src="img/govIcon.gif" alt=""></p>
        <div class="service">
            <img src="img/1.png" alt="">
        </div>
    </div>

</body>

<script src="jquery.min.js "></script>
<script src="netaddress.js"></script>
<script>
    let num = sessionStorage.getItem("num")
    if (num > 0) {
        $(".shopping .shopping_car").find("b").html(num)
    } else {
        $(".shopping .shopping_car").find("b").html(0)
        $(".null").css({
            display: "block"
        })
        $(".templete").css({
            display: "none"
        })
    }
    let users = JSON.parse(sessionStorage.getItem("users"))
    if (users) {
        let user = users[0]
        $.ajax({
            url: `${netaddress}/getorder`,
            data: {
                userid: user.id
            },
            success(data) {
                if (data == "error") {
                    return
                } else {
                    let dayta = JSON.stringify(data)
                    sessionStorage.setItem("order", dayta)
                }
            }
        })
        let orders = JSON.parse(sessionStorage.getItem("order"))
        if (orders) {
            $(".shopping .buyCar").find("b").html(orders.length)
            let order = orders[0]
            $(".templete .box b img").attr("src", order.imgone)
            $(".templete .box .tittle ").html(order.tittle)
            $(".templete .box .price ").html(order.currentPrice)
            $(".templete .box .money").html(order.currentPrice)
            $(".shopping .shopping_car").find("b").html(orders.length)
        }
    }
    if ($(".shopping .shopping_car").find("b").html() > 0) {
        $(".null").css({
            display: "none"
        })
        $(".templete").css({
            display: "block"
        })
    }
    $(".li ").mouseenter(function() {
        $(".img ").show()
    })
    $(".li ").mouseleave(function() {
        $(".img ").mouseenter(function() {
            $(".img ").show()
        })
        $(".img ").mouseleave(function() {
            $(".img ").hide()
        })
        $(".img ").hide()
    })
    $(".menu ul li ").mouseenter(function() {
        n = $(this).index()
        $(".Submenu ").eq(n).css({
            display: "block "
        })
    })
    $(".menu ul li ").mouseleave(function() {
        $(".Submenu ").mouseenter(function() {
            $(".Submenu ").eq(n).css({
                display: "block "
            })
        })
        $(".Submenu ").mouseleave(function() {
            $(".Submenu ").eq(n).css({
                display: "none "
            })
            $(".menu").css({
                display: "none"
            })
        })
        $(".Submenu ").css({
            display: "none "
        })
    })
    $(".list").mouseenter(function() {
        $(".menu").css({
            display: "block"
        })
    })
    $(".list").mouseleave(function() {
        $(".menu ul").mouseenter(function() {
            $(".menu").css({
                display: "block"
            })
        })
        $(".menu ul").mouseleave(function() {
            $(".Submenu ").mouseenter(function() {
                $(".menu").css({
                    display: "block "
                })
            })
            $(".menu").css({
                display: "none"
            })
        })
        $(".menu").css({
            display: "none"
        })
    })

    $(".num_count button").click(function() {
        if ($(this).html() == "+") {
            $(".num_count span").html(Number($(this).closest(".num_count").find("span").html()) + 1)
        }
        if ($(this).html() == "-") {
            if ($(".num_count span").html() <= 1) {
                return
            }
            $(".num_count span").html(Number($(this).closest(".num_count").find("span").html()) - 1)
        }
        $(".box1 ul .num1").html($(".box .num_count span").html())
        $(".box1 ul .num2").html("¥" + Number($(".box1 ul .num1").html()) * Number($(".price").html()) + ".00")
        $(".money").html(Number($(".num_count span").html()) * Number($(".price").html()) + ".00")
    })
    $(".body_introduce_right ul li span").click(function() {
        $(this).css({
            border: "1px solid #ca151d"
        })
        $(".body_introduce_right h4 span").html($(this).html())
    })

    $(".head .page").click(function() {
        location.href = `${netaddress}/homePage.html`
    })
    $(".headbox .login").click(function() {
        location.href = `${netaddress}/login.html`
    })
    $(".headbox .register").click(function() {
        location.href = `${netaddress}/register.html`
    })
    let Url = location.href

    function parseUrl(url) {
        let arr = url.slice(url.indexOf("?") + 1).split("&")
        let result = {}
        arr.forEach(item => {
            key = item.split("=")[0];
            val = item.split("=")[1];
            result[key] = val
        })
        return result;
    }
    $.ajax({
        url: `${netaddress}/getid`,
        data: {
            id: parseUrl(Url).id
        },
        success(data) {
            $(".templete .box b img").attr("src", data.imgone)
            $(".templete .box .tittle ").html(data.tittle)
            $(".templete .box .price ").html(data.currentPrice)
            $(".templete .box .money").html(data.currentPrice)
        }
    })
    let num1 = sessionStorage.getItem("num")
    if (num1) {
        $(".shopping .buygoods").find("b").html(num1)
    } else {
        $(".shopping .buygoods").find("b").html(0)
    }
    let inputlist = $(".templete input")
    $(".inputone").click(function() {
        for (let i = 0; i < inputlist.length; i++) {
            inputlist[i].checked = this.checked
        }
        $(".body_count .templete .box1 p").css({
            backgroundColor: "#ea2329"
        })
        $(".box1 ul .num1").html($(".box .num_count span").html())
        $(".box1 ul .num2").html("¥" + Number($(".box1 ul .num1").html()) * Number($(".price").html()) + ".00")
        $(".box1 p").click(function() {
            if (user) {
                sessionStorage.removeItem("num")
                location.href = `${netaddress}/personalCenter.html`
            } else {
                alert("您还未登录，无法进行支付操作")
            }
        })
        if ($(this)[0].checked == false) {
            for (let i = 0; i < inputlist.length; i++) {
                inputlist[i].checked = $(this)[0].checked
            }
            $(".body_count .templete .box1 p").css({
                backgroundColor: "#999999",
            })
            $(".box1 ul .num1").html(0)
            $(".box1 ul .num2").html(0)
        }
    })
    $(".inputtwo").click(function() {
        for (let i = 0; i < inputlist.length; i++) {
            inputlist[i].checked = this.checked
        }
        $(".body_count .templete .box1 p").css({
            backgroundColor: "#ea2329"
        })
        $(".box1 ul .num1").html($(".box .num_count span").html())
        $(".box1 ul .num2").html("¥" + Number($(".box1 ul .num1").html()) * Number($(".price").html()) + ".00")
        $(".box1 p").click(function() {
            if (user) {
                location.href = `${netaddress}/personalCenter.html`
            } else {
                alert("您还未登录，无法进行支付操作")
            }
        })
        if ($(this)[0].checked == false) {
            for (let i = 0; i < inputlist.length; i++) {
                inputlist[i].checked = $(this)[0].checked
            }
            $(".body_count .templete .box1 p").css({
                backgroundColor: "#999999",
            })
            $(".box1 ul .num1").html(0)
            $(".box1 ul .num2").html(0)
        }
    })
    $(".inputfour").click(function() {
        for (let i = 0; i < inputlist.length; i++) {
            inputlist[i].checked = this.checked
        }
        $(".body_count .templete .box1 p").css({
            backgroundColor: "#ea2329"
        })
        $(".box1 ul .num1").html($(".box .num_count span").html())
        $(".box1 ul .num2").html("¥" + Number($(".box1 ul .num1").html()) * Number($(".price").html()) + ".00")
        $(".box1 p").click(function() {
            if (user) {
                location.href = `${netaddress}/personalCenter.html`
            } else {
                alert("您还未登录，无法进行支付操作")
            }
        })
        if ($(this)[0].checked == false) {
            for (let i = 0; i < inputlist.length; i++) {
                inputlist[i].checked = $(this)[0].checked
            }
            $(".body_count .templete .box1 p").css({
                backgroundColor: "#999999",
            })
            $(".box1 ul .num1").html(0)
            $(".box1 ul .num2").html(0)
        }
    })
    let user = sessionStorage.getItem("users")
    $(".inputthree").click(function() {
        if (!$(this).checked) {
            $(".body_count .templete .box1 p").css({
                backgroundColor: "#ea2329",
            })
            $(".box1 ul .num1").html($(".box .num_count span").html())
            $(".box1 ul .num2").html("¥" + Number($(".box1 ul .num1").html()) * Number($(".price").html()) + ".00")
            $(".box1 p").click(function() {
                if (user) {
                    sessionStorage.removeItem("num")
                    location.href = `${netaddress}/personalCenter.html`
                } else {
                    alert("您还未登录，无法进行支付操作")
                }
            })
        }
        if ($(this)[0].checked == false) {
            for (let i = 0; i < inputlist.length; i++) {
                inputlist[i].checked = $(this)[0].checked
            }
            $(".body_count .templete .box1 p").css({
                backgroundColor: "#999999",
            })
            $(".box1 ul .num1").html(0)
            $(".box1 ul .num2").html(0)
        }
    })
</script>

</html>